<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class='cun'>存</button>
    <button class='qu'>取</button>
    <button class="shan">删</button>
    <button class="shan2">删2</button>
    <script>

        // 本地存储
        // 1.session   会话  对话
        // 2.local
        // 强制刷新   浏览器是有缓存  会将一个页面部分信息缓存
        // 下次请求就不会再重新下载  
        // ctrl+f5 强制刷新  不管有没有缓存  都从服务器重新请求下载

        var cun=document.querySelector('.cun');
        var qu=document.querySelector('.qu');
        var shan=document.querySelector('.shan');
        var shan2=document.querySelector('.shan2');
        // sessionStorage 以键值对的形式来存储
        cun.addEventListener('click',function(){
            sessionStorage.setItem('name1','小谢'); // 增加  修改
        });

        qu.addEventListener('click',function(){
            console.log(sessionStorage.getItem('name1')); // 查
        });

        shan.addEventListener('click',function(){
            sessionStorage.removeItem('name1'); // 删
        });

        shan2.addEventListener('click',function(){
            // 清除   清除所有
            sessionStorage.clear();
        });


        // 生命周期  小孩-》大人->嗝屁
        // -> 设置  -》浏览器关闭
    </script>
</body>
</html>